<template>
    <view v-if="showClone" class="l-class l-noticebar" :style="'color: ' + color + '; background-color: ' + backgroundcolor">
        <l-icon v-if="frontIconName" :size="frontIconSize" :color="frontIconColor" :name="frontIconName" class="l-noticebar-icon" l-class="l-icon-class" />
        <swiper autoplay vertical :interval="4 * speed" class="l-noticebar-content-wrap" v-if="type == 'swip'">
            <block v-for="(item, index) in swipArr" :key="index">
                <swiper-item :data-index="index" mut-bind:tap="onSwip">
                    {{ item }}
                </swiper-item>
            </block>
        </swiper>
        <view class="l-noticebar-content-wrap l-noticebar-content-wrap-view" v-else>
            <view class="l-noticebar-content" mut-bind:tap="handleTap" :animation="animationData">
                <slot></slot>
            </view>
        </view>
        <l-icon v-if="endIconName && !close" :size="endIconSize" :color="endIconColor" class="l-noticebar-operation" :name="endIconName" mut-bind:tap="onIconTap" />
        <l-icon v-if="close" class="l-noticebar-operation" name="close" :size="endIconSize" :color="endIconColor" mut-bind:tap="onClose" />
    </view>
</template>

<script>
import lIcon from '../icon/index';
import nodeUtil from '../core/utils/node-util';
export default {
    data() {
        return {
            wrapWidth: 0,
            width: 0,
            duration: 0,
            animation: null,
            timer: null,
            animationData: '',
            showClone: ''
        };
    },

    externalClasses: ['l-class', 'l-icon-class'],

    props: {
        type: {
            type: String,
            default: 'still'
        },
        swipArr: Array,
        frontIconName: {
            type: String,
            default: ''
        },
        frontIconSize: {
            type: Number,
            default: 28
        },
        frontIconColor: {
            type: String,
            default: '#3683D6'
        },
        endIconName: {
            type: String,
            default: ''
        },
        endIconSize: {
            type: Number,
            default: 28
        },
        endIconColor: {
            type: String,
            default: '#3683D6'
        },
        backgroundcolor: {
            type: String,
            default: '#DFEDFF'
        },
        color: {
            type: String,
            default: '#3683D6'
        },
        speed: {
            type: Number,
            default: 1500
        },
        show: {
            type: Boolean,
            default: true
        },
        close: {
            type: Boolean,
            default: false
        }
    },

    destroyed() {
        this.destroyTimer();
    },

    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },

    methods: {
        ready() {
            if ('roll' === this.type && this.showClone) {
                this.initAnimation();
            }
        },

        async initAnimation() {
            const t = await nodeUtil.getNodeRectFromComponent(this, '.l-noticebar-content');
            const i = await nodeUtil.getNodeRectFromComponent(this, '.l-noticebar-content-wrap');
            const a = (t.width / 40) * this.speed;
            const e = uni.createAnimation({
                duration: a,
                timingFunction: 'linear'
            });
            this.setData(
                {
                    wrapWidth: i.width,
                    width: t.width,
                    duration: a,
                    animation: e
                },
                () => {
                    this.startAnimation();
                }
            );
        },

        startAnimation() {
            if (0 !== this.animation.option.transition.duration) {
                this.animation.option.transition.duration = 0;
                const t = this.animation.translateX(this.wrapWidth).step();
                this.setData({
                    animationData: t.export()
                });
            }
            this.animation.option.transition.duration = this.duration;
            const t = this.animation.translateX(-this.width).step();
            setTimeout(() => {
                this.setData({
                    animationData: t.export()
                });
            }, 100);
            const i = setTimeout(() => {
                this.startAnimation();
            }, this.duration);
            this.setData({
                timer: i
            });
        },

        destroyTimer() {
            if (this.timer) {
                clearTimeout(this.timer);
            }
        },

        handleTap() {
            this.$emit(
                'lintap',
                {
                    detail: {}
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
            this.setData({
                timer: null
            });
        },

        onSwip(t) {
            this.$emit(
                'lintap',
                {
                    detail: {
                        ...t.currentTarget.dataset
                    }
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },

        onIconTap() {
            this.$emit(
                'linicontap',
                {
                    detail: {}
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
            this.setData({
                timer: null
            });
        },

        onClose() {
            this.setData({
                timer: null,
                showClone: false
            });
        }
    },

    created: function () {}
};
</script>
<style>
.l-noticebar {
    display: flex;
    height: 72rpx;
    width: 750rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    color: #3963bc;
    background-color: #dfedff;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 rgba(218, 224, 233, 0.4);
    border-radius: 0 0 8px 8px;
}
.l-noticebar-icon {
    display: flex;
    margin-left: 20rpx;
    margin-right: 18rpx;
    align-items: center;
}
.l-noticebar-icon + .l-noticebar-content-wrap-view {
    margin-left: 5rpx;
}
.l-noticebar-operation {
    display: flex;
    margin-right: 16rpx;
    margin-left: 8rpx;
    align-items: center;
}
.l-noticebar-content-wrap {
    display: flex;
    margin-left: 5rpx;
    flex: 1;
    height: 72rpx;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.l-noticebar-content-wrap .l-noticebar-content {
    position: absolute;
    transition-duration: 20s;
}
</style>
